<template>
    <div>
        <div class="title">十分治愈后台管理系统</div>
        <el-container style="height: 200vh">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                    <el-radio-button :label="false">展开</el-radio-button>
                    <el-radio-button :label="true">收起</el-radio-button>
                </el-radio-group>
                <el-menu
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        :collapse="isCollapse"
                >
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">用户管理</span>
                        </template>
                        <el-menu-item-group>
                            <!-- <span slot="title">分组一</span> -->
                            <el-menu-item index="1-1"><router-link to="/indexAdmin/userAdmin">用户管理</router-link></el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>


                </el-menu>
            </el-aside>
            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <!-- 头部内容 -->
                </el-header>
                <el-main>
                    <!-- 主要内容 -->
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                uid: "",
                username: "",
                isCollapse: false,
            };
        },
        created() {
            this.uid = sessionStorage.getItem("uid");
            this.username = sessionStorage.getItem("username");

            console.log(this.uid);
            console.log(this.username);
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
        },
    };
</script>

<style scoped>

    a{
        text-decoration: none;
    }

    .title {
        background-color: rgb(182, 203, 208);
        height: 4rem;
        line-height: 4rem;
        color: white;
        font-size: 2rem;
        text-align: left;
        padding-left: 200px;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
</style>


